﻿<!DOCTYPE HTML>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit|ie-comp|ie-stand">
	<link rel="Bookmark" href="imgs/favicon.ico"/>
	<link rel="Shortcut Icon" href="imgs/favicon.ico"/>
	<link rel="stylesheet" type="text/css" href="static/h-ui/css/H-ui.min.css"/>
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/H-ui.admin.css"/>
	<link rel="stylesheet" type="text/css" href="lib/Hui-iconfont/1.0.8/iconfont.css"/>
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/skin/default/skin.css" id="skin"/>
	<link rel="stylesheet" type="text/css" href="static/h-ui.admin/css/style.css"/>
	<title>商城</title>
	<style>
		/* 表单整体样式 */
		#queryForm {
			display: flex;
			flex-wrap: wrap;
			gap: 10px;
			align-items: center;
		}

		/* 表单元素布局 */
		.form-group {
			display: flex;
			align-items: center;
			margin-right: 15px;
		}

		.form-group label {
			margin-right: 5px;
			font-weight: bold;
		}

		.input-text, .select {
			padding: 5px 10px;
			height: 30px;
			border: 1px solid #ddd;
			border-radius: 4px;
			box-sizing: border-box;
		}

		.btn {
			padding: 5px 15px;
			cursor: pointer;
		}

		.btn-primary {
			background-color: #007bff;
			color: #fff;
			border: none;
			border-radius: 4px;
		}

		.btn-default {
			background-color: #f0f0f0;
			color: #333;
			border: 1px solid #ccc;
			border-radius: 4px;
		}

		/* 小屏幕优化 */
		@media (max-width: 768px) {
			#queryForm {
				flex-direction: column;
				gap: 5px;
			}
			.form-group {
				margin-right: 0;
			}
		}

	</style>
</head>
<body>
<!--顶部-->
<header class="navbar-wrapper"></header>
<!--左侧菜单-->
<aside class="Hui-aside">
	<div class="menu_dropdown bk_2" id="leftMenu"></div>
</aside>

<!--首页-->
<section class="Hui-article-box">
	<nav class="breadcrumb">
		<i class="Hui-iconfont">&#xe67f;</i>
		<a href="index.html" class="maincolor">首页</a>
		<span class="c-gray en">&gt;</span> 商品管理
		<span class="c-gray en">&gt;</span> 商品列表
	</nav>
	<div class="Hui-article">
		<article class="cl pd-20">
			<div class="cl pd-5 bg-1 bk-gray">
				<span class="l">
					<a href="javascript:;" onclick="goods_add('添加分类','goods-add.html','',0)"
					   class="btn btn-primary radius">
						<i class="Hui-iconfont">&#xe600;</i>
						添加商品
					</a>
					<!--<a href="javascript:;" onclick="daochu();" class="btn btn-primary radius">-->
					<!--点击导出-->
					<!--</a>-->
					<!--<span id="down"></span>-->
					<a href="javascript:;" class="btn btn-primary radius" onclick="outExcel();">点击导出</a>
				</span>
				<span class="r">共有数据：<strong id="pageTotal">0</strong> 条</span>
			</div>
			<div class="cl pd-5 bg-1 bk-gray" style="display: flex;align-items: center">
				<!-- 商品编号 -->
				<div class="form-group">
					<label for="gno" style="  white-space: nowrap; ">商品编号：</label>
					<input type="text" class="input-text" id="gno" name="gno" placeholder="请输入商品编号">
				</div>

				<!-- 商品名称 -->
				<div class="form-group">
					<label for="title" style="  white-space: nowrap; ">商品名称：</label>
					<input type="text" class="input-text" id="title" name="title" placeholder="请输入商品名称关键词">
				</div>

				<!-- 商品分类 -->
				<div class="form-group">
					<label for="cate_id" style="  white-space: nowrap; ">商品分类：</label>
					<select class="select" id="cate_id" name="cate_id">
						<option value="">请选择分类</option>
						<option value="1">分类1</option>
						<option value="2">分类2</option>
						<option value="3">分类3</option>
					</select>
				</div>

				<!-- 商品销量区间 -->
				<div class="form-group">
					<label for="sale_min" style="  white-space: nowrap; ">销量区间：</label>
					<input type="number" class="input-text" id="sale_min" placeholder="最小销量" style="width: 100px;">
					-
					<input type="number" class="input-text" id="sale_max" placeholder="最大销量" style="width: 100px;">
				</div>

				<!-- 上架状态 -->
				<div class="form-group">
					<label for="is_shelf" style="  white-space: nowrap; ">上架状态：</label>
					<select class="select" id="is_shelf">
						<option value="">全部</option>
						<option value="1">已上架</option>
						<option value="2">已下架</option>
					</select>
				</div>

				<!-- 是否上新 -->
				<div class="form-group">
					<label for="isnew" style="  white-space: nowrap; ">是否上新：</label>
					<select class="select" id="isnew">
						<option value="">全部</option>
						<option value="1">是</option>
						<option value="2">否</option>
					</select>
				</div>

				<!-- 搜索按钮 -->
				<button type="button" class="btn btn-primary radius" onclick="toSearch()">查询</button>
				<button type="reset" class="btn btn-default radius" onclick="reset()">重置</button>

			</div>
			<div class="mt-10">
				<table class="table table-border table-bordered table-hover table-bg">
					<thead>
					<tr>
						<th scope="col" colspan="10">商品列表
							<select onchange="batch_modify(this.value)">
								<option>请选择批量操作</option>
								<option value="1">批量上架</option>
								<option value="2">批量下架</option>
								<option value="3">批量删除</option>
							</select>
						</th>
					</tr>
					<tr class="text-c">
						<th><input type="checkbox" onclick="swapCheck()">  ID</th>
						<th>商品图片</th>
						<th>商品编号</th>
						<th>商品名称</th>
						<th>商品分类</th>
						<th>商品销量</th>
						<th>是否为上新</th>
						<th>操作</th>
					</tr>
					</thead>
					<tbody>
					<tr class="text-c">
						<td>-</td>
						<td>-</td>
						<td>-</td>
						<td>-</td>
						<td>-</td>
						<td>-</td>
					</tr>
					</tbody>
				</table>
				<div id="pageHtml"></div>
			</div>
		</article>
	</div>
</section>

<!--自定义弹窗-->
<span id="msgPop"></span>
</body>
</html>


<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/layer/2.4/layer.js"></script>
<script type="text/javascript" src="static/h-ui/js/H-ui.js"></script>
<script type="text/javascript" src="static/h-ui.admin/js/H-ui.admin.page.js"></script>
<script type="text/javascript" src="js/config.js"></script>
<script type="text/javascript" src="js/view.js"></script>
<script type="text/javascript" src="js/goods.js"></script>
<script type="text/javascript">
	var isCheckAll = false;
	function getParamByUrl(key) {
		let regex = new RegExp('[?&]' + key + '=([^&#]*)', 'i');
		let result = regex.exec(window.location.href);
		return result ? decodeURIComponent(result[1]) : null; // 确保解码
	}
	var pages = {
		start: 1, limit: pageSize, total: 0,
		url: '/admin/goods.html',
		excel: 'goods'
	};
	var gno = getParamByUrl('gno');
	var title = getParamByUrl('title');
	var cate_id = getParamByUrl('cate_id');
	var sale_min = getParamByUrl('sale_min');
	var sale_max = getParamByUrl('sale_max');
	var is_shelf = getParamByUrl('is_shelf');
	var isnew = getParamByUrl('isnew');

	pages.start = getParamByUrl('start');
	pages.start = pages.start ? pages.start : 1;
	(function () {
		// 从 URL 获取参数
		$('#gno').val(getParamByUrl('gno') || '');
		$('#title').val(getParamByUrl('title') || '');
		$('#cate_id').val(getParamByUrl('cate_id') || '');
		$('#sale_min').val(getParamByUrl('sale_min') || '');
		$('#sale_max').val(getParamByUrl('sale_max') || '');
		$('#is_shelf').val(getParamByUrl('is_shelf') || '');
		$('#isnew').val(getParamByUrl('isnew') || '');
		getList(); // 执行获取数据的方法（需要自己定义）
		loadCategories();
	})();
	function reset(){
		//清楚地址栏参数刷新
		window.location.href = '/admin/goods.html';
	}
	function toSearch() {
		var url = pages.url;
		url += '?start=' + pages.start;
		url += '&gno=' + $('#gno').val();
		url += '&title=' + $('#title').val();
		url += '&cate_id=' + $('#cate_id').val();
		url += '&sale_min=' + $('#sale_min').val();
		url += '&sale_max=' + $('#sale_max').val();
		url += '&is_shelf=' + $('#is_shelf').val();
		url += '&isnew=' + $('#isnew').val();
		window.location.href = url;
	}
	function swapCheck() {
		if (isCheckAll) {
			console.log('反选')
			$("input[type='checkbox']").each(function() {
				this.checked = false;
			});
			isCheckAll = false;
		} else {
			console.log('全选')

			$("input[type='checkbox']").each(function() {
				this.checked = true;
			});
			isCheckAll = true;
		}
	}
	function batch_modify(type)
	{
		let ids=[];

		$("input[name='id']:checked").each(function(i){ //把所有被选中的复选框的值存入数组
			ids[i]=$(this).val();
		});
		switch(type) {
			case '1':
				batch_status(ids,1);
				break;
			case '2':
				batch_status(ids,0);
				break;
			case '3':
				batch_del(ids);
				break;
		}
	}

</script>